<script>
import request from "../../utils/request"
import shareInfo from "../../utils/shareInfo"
import numberUtils from "../../utils/numberUtils"
import footerContent from "./component/footerContent.vue"

export default {
  name: "directBuying",
  computed: {
    numberUtils() {
      return numberUtils
    },
  },
  components: { footerContent },
  data() {
    return {
      details: null,
    }
  },
  onLoad(query) {
    //获取课程详情
    request({
      url: "courseClass/getDetailsById",
      data: {
        id: query.id,
      },
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.details = data
      //动态设置页面标题
      uni.setNavigationBarTitle({
        title: data.className,
      })
    })
  },
  //配置右上角分享
  async onShareAppMessage() {
    return await shareInfo.getTJGShareInfo({
      title: this.details.className,
      path: `/pages/course/detail?id=${this.details.id}`,
      imageUrl: this.getShowImage(this.details.topCarouselList[0]),
    })
  },
  provide() {
    return {
      parent: this,
    }
  },
}
</script>

<template>
  <view class="page" v-if="details">
    <view class="title">确认订单</view>
    <view class="class-name">{{ details.className }}</view>
    <view class="price">￥{{ numberUtils.fenToYuan(details.price) }}</view>
    <footerContent></footerContent>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: 50rpx;
  .title {
    font-size: 34rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  .class-name {
    font-size: 34rpx;
  }
  .price {
    font-size: 30rpx;
    color: #ff4d4f;
    margin-top: 30rpx;
  }
  .take-order-btn {
    position: fixed;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #ff4d4f;
    color: #fff;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
}
</style>
